<template>
  <div class="conflict-detail">
    <a-descriptions bordered :column="1">
      <a-descriptions-item label="冲突类型">{{ data.conflictType || '课程冲突' }}</a-descriptions-item>
      <a-descriptions-item label="主要课程">{{ data.courseName }}</a-descriptions-item>
      <a-descriptions-item label="冲突时间">{{ data.conflictTime }}</a-descriptions-item>
      <a-descriptions-item label="冲突对象">{{ data.conflictTarget }}</a-descriptions-item>
      <a-descriptions-item label="冲突描述" v-if="data.description">
        {{ data.description }}
      </a-descriptions-item>
    </a-descriptions>
    
    <div class="solution-section" v-if="hasSolution">
      <h4>解决方案建议</h4>
      <a-radio-group v-model="solution">
        <a-radio 
          v-for="item in solutionOptions" 
          :key="item.value" 
          :value="item.value"
          style="display: block; margin-bottom: 10px;"
        >
          {{ item.label }}
        </a-radio>
      </a-radio-group>
      
      <a-button 
        type="primary" 
        @click="handleApplySolution"
        style="margin-top: 15px;"
      >
        应用解决方案
      </a-button>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      solution: '',
      solutionOptions: [
        { value: 'adjust_time', label: '调整当前课程时间' },
        { value: 'adjust_target', label: '调整冲突课程时间' },
        { value: 'change_room', label: '更换教室' },
        { value: 'merge_class', label: '合并课程' }
      ]
    }
  },
  computed: {
    hasSolution() {
      return this.data.conflictType !== '考试冲突'
    }
  },
  methods: {
    handleApplySolution() {
      if (!this.solution) {
        this.$message.warning('请先选择解决方案')
        return
      }
      
      this.$emit('apply-solution', {
        conflictId: this.data.id,
        solution: this.solution
      })
      this.$message.success('解决方案已应用')
    }
  }
}
</script>

<style scoped>
.conflict-detail {
  padding: 10px;
}

.solution-section {
  margin-top: 30px;
  padding: 15px;
  border: 1px dashed #d9d9d9;
  border-radius: 4px;
}

h4 {
  margin-bottom: 15px;
  color: rgba(0, 0, 0, 0.85);
}
</style>